<template>
	<!-- 标题-更多 -->
	<view class="content-title">
		<view class="name">
			<view class="line"></view>
			<slot name="left"></slot>
		</view>
		<view class="custom">
			<slot name="right"></slot>
		</view>
	</view>
	<view class="boder">
	</view>
	<!-- grid 布局 -->
	<view class="content-grid">
		<view class="box" 
		v-for="(item,index) in props.partList" 
		key="index"
		@click="linkto(item.url||'/pages/partList/#')"
		>
		{{item.name||'待命名'}}</view>
	</view>
	
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
	partList:{
		type:Array,
		default:()=>[]
	}
})
//partlist:{listName,url}
const linkto = function(e){
	return console.log(e);
	uni.navigateTo({
		url: e,
		success: res => { console.log(res); },
		fail: (err) => { console.log(err); },
		complete: (e) => { console.log(e); }
	});
}
// const partData = ref({
// 	partName:'维修',
// 	gridList:[
// 		{listName:'维修项目',listUrl:'#'},
// 	]
// })
// partList={...partData}
</script>

<style lang="scss" scoped>
// 标题部分
.content-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 15rpx 0;
	// border: 1px solid red;
	.name{
		font-size: 32rpx;
		// border: 1px solid red;
		display: flex;
		justify-content: center;
		align-items: center;
		.line{
			width: 4rpx;
			height: 24rpx;
			background-color: #2979ff;
			margin-right: 6rpx;
		}
	}
	.custom{
		// border: 1px solid red;
	}
	
}
//分割线
.boder{
		width: 95%;
		height: 1px;
		border:1px dashed #bbb;
		margin: 2px auto;
	}
// 内容部分
.content-grid{
	width: 100%;
	height: auto;
	padding: 15rpx;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(100rpx,1fr));
	gap: 10rpx;
	// border: 1px solid blue;
	.box{
		height: 100rpx;
		border: 1px solid red;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>